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regulatory processes within the cell. They are moreover widely used to interpret 
and integrate data from large-scale studies, such as expression or functional vl 
screens. We present KEGGViewer a BioJS component to visualize KEGG published 
pathways and to allow their visual integration with functional data. e 
Availability: KEGGViewer is an open-source tool freely available at the BioJS 

Registry. Instructions on how to use the tool are available at . „ .. , ... . + f ~ 

3 3 1 Hedi Peterson, University of Geneva 

http://goo.gl/dVeWpg and the source code can be found at 

http://github.com/biojs/biojs and DOI:10.5281/zenodo.7708. Switzerland, Priit Adler, University of Tartu 

Estonia 

2 Alexander Pico, Gladstone Institutes USA 

Latest Comments 

No Comments Yet 




Corresponding author: Bianca H. Habermann (habermann@biochem.mpg.de) 

How to cite this article: Villaveces JM, Jimenez RC and Habermann BH (2014) KEGGViewer, a BioJS component to visualize 
KEGG Pathways [v1 ; ref status: indexed, http://f1000r.es/2uq] FIOOOResearch 2014, 3:43 (doi: 10.12688/f1000research.3-43.v1) 

Copyright: © 2014 Villaveces JM etal. This is an open access article distributed under the terms of the Creative Commons Attribution Licence, 
which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited. 

Grant information: JMV was financed by BMBF-grant 315737 (Virtual Liver Network). This work was supported by the Max Planck Society. 
The funders had no role in study design, data collection and analysis, decision to publish, or preparation of the manuscript. 

Competing interests: No competing interests were disclosed. 

First published: 13 Feb 2014, 3:43 (doi: 10.12688/f1000research.3-43.v1) 
First indexed: 28 Feb 2014, 3:43 (doi: 10.12688/f1000research.3-43.v1) 



Page 1 of 6 



FIOOOResearch 2014, 3:43 Last updated: 1 1 MAR 2014 



Introduction 

Networks and network-based techniques are widely used in sys- 
tems biology to model biological processes such as gene regulation, 
protein interactions and signaling pathways. Signaling pathways in 
particular, provide an understanding of cell dynamics by describing 
step by step the temporal interactions that a group of molecules or 
metabolites undergo in order to control one or more cellular functions. 

Different attempts have been made to store and aid the retrieval and 
analysis of signaling pathways. For example the Kyoto Encyclopedia 
of Genes and Genomes (KEGG) 1 contains a large collection of manu- 
ally curated pathway maps. Panther Pathway 1 , as another example, 
provides access to a number of mainly signaling pathways, subfami- 
lies and protein sequences mapped to individual pathway components. 

KEGG is widely used by researchers to retrieve pathway informa- 
tion. Pathway maps in KEGG can be downloaded as static PNG 
images or alternatively as KEGG Markup Language (KGML) files 
(free of charge for academic use). KGML is an XML-like format 
that describes a pathway, its components and relationships and can, 
for instance, be used to visualize pathways 3 , generate systems biol- 
ogy models 4 or perform network analysis 5 . 

Large-scale techniques like expression arrays, deep sequencing or 
proteomics allow monitoring the relative or absolute level of expres- 
sion for a large number of genes simultaneously. However, expression 
profiling by itself is not sufficient to understand the exact role of a 
set of genes in a biological process. In order to gain new insights 
into the regulatory relationships of differentially regulated genes, 
expression profiles from a large-scale study can be integrated with 
signaling pathways. 

Here, we present KEGGViewer, software that allows visual integra- 
tion of KEGG pathways and expression profiles. We have coded 
KEGGViewer in BioJS 6 , a JavaScript library that holds components 
for visualizing biological data on the web. The KEGGViewer com- 
ponent is open source and freely available at http://goo.gl/dVeWpg. 

The KEGGViewer component 

To run KEGGViewer (i) a target DIV ID (unique identifier) to ren- 
der the pathway, (ii) a KEGG pathway ID and (iii) a proxy URL 
to bypass the same domain policy constraint in JavaScript are 
required. The following code snippet illustrates how to initialize 
the component: 

var instance = new Bio j s . KEGGViewer ({ 
target: "example", 
pathld: "hsa04910", 
proxy : "proxy . php " 

}) ; 

With that input, KEGGViewer queries the KEGG API 7 in order to 
obtain the KGML-formatted KEGG pathway. Once retrieved, the 
KGML file is parsed by KEGGViewer and the pathway is rendered 
using Cytoscape.js* Figure la). 

To contextualize regulatory relationships between a predefined set 
of genes, KEGGViewer can integrate userprovided gene expression 
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Figure 1. (a) KEGGViewer rendering of the insulin signaling pathway. 
Pathway components can be manually repositioned. Genes and 
pathways are represented as green and blue boxes respectively 
while purple dots represent chemical compounds. Relationships 
represent reactions e.g. activation, inhibtion or phosphorilation. 
(b) Zoomed view of the insulin signaling pathway. Condition 1 is 
selected in the control panel (top right) and the expression range 
is set to consider expression levels between -0.43 and 0.43 to be 
non differentially expressed. Genes PPP1CA and PYGB in red are 
upregulated while GYS1 in blue is downregulated. GSK3B and 
CALML6\n green are non differentially expressed genes. The purple 
dot C00369 represents Starch. 

data in a pathway (Figure lb). For this, the expression values must 
be handed over to KEGGViewer. The following code shows how to 
initialize the component to overlay expression data: 

var instance = new Bio j s . KEGGViewer ( { 
target: "example", 
pathld: "hsa04910", 
proxy: "proxy. php", 
expression : { 

upColor : 'red', 

downColor : 'blue', 

genes: ['hsa : 2998', 'hsa : 5834', 

'hsa:5499', 'hsa:2194'], 

conditions: [ 
{ 

name : 'condition 1', 

values: [-1, 0.5, 0.7, -0.3] 

}, 
{ 

name : 'condition 2', 

values: [0.5, -0.1, -0.2, 1] 

}, 
{ 

name : 'condition 3', 
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values: [0, 0.4, -0.2, 0.5] 

} 

] 

} 

}) ; 

The expression parameter defines the color to highlight up- and 
down-regulation, the genes affected and the different experimen- 
tal conditions, in which expression values were obtained for the 
affected genes (Figure lb). 

By providing expression data to KEGGViewer, the tool is able to (i) 
highlight genes according to their expression values in each experi- 
mental condition, (ii) allow users to change the threshold param- 
eters for up- and down-regulation, and (iii) visualize expression 
changes under different experimental conditions as a slideshow. 

More details on how to use KEGGViewer can be obtained from the 
BioJS Registry in http://goo.gl/dVeWpg. 

Conclusions 

KEGGViewer is a simple, web-based component for visualization 
of KEGG pathways and integration of user-provided expression 
data on pathway information. It follows the principles of reutiliza- 
tion, sharing and development behind BioJS. KEGGViewer is easy 
to integrate in any website and provides functionality to interact 



with other JavaScript components. As a BioJS component, KEG- 
GViewer is easy to extend allowing changes to be made or new 
functionality to be included. 

Software availability 

Zenodo: KEGGViewer, a BioJS component to visualize KEGG 
pathways, doi: 1 0.528 l/zenodo.7708 9 

GitHub: BioJS, http://github.com/biojs/biojs 
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The BioJS library of components has a lot of potential. It's encouraging to see a diversity of interactive 
viewers already registered with BioJS. The intersection of modern JavaSript (JS) components with 
network biology in particular is ripe for development to bring powerful perspectives on massive biomedical 
datasets to researchers. I decided to critique this article introducing the BioJS KEGGViewer from three 
points of view to acknowledge the broad set of use cases and challenges this work takes on. While there 
are a number of things to improve upon (as always) and a few points requiring clarification, the project is a 
nice addition to the BioJS library and may provide a useful data visualization option when deployed with a 
complementary set of web tools for selecting pathways, managing datasets and viewing details. 



Generic User: 

• The "play" feature is great for comparing conditions. Nicely done! 

• Panning is tricky, I seem to have to hold cmd, click, pause, and then drag. Without the 'pause' I 
invoke a selection tool. 

• There is no additional information or link-outs when you click on a node; only the gene symbol is 
provided. 

• There is no interface for accessing the data values underlying the visualization. There is a 
disconnect between the web developer who sets up the viewer with all the underlying expression 
data and the end-user who views the data with only limited access and controls. 

Biomedical Researcher: 

• The default expression range appears to be set at min-min, which results in all data values 
visualized as up-regulation. I would recommend default values centered on 0 in addition to support 
for user-provided parameters. 

• Unfortunately, the parameter names and value ranges for data overlays are unnecessarily 
restricted to "expression", "upColor" and "downColor". A generic solution for data overlay that 
could work with any type of data (KEGGViewer shouldn't care if it's expression or not) and color 
gradients or discrete mapping options would be much more useful. 

• All of these sorts of options are in fact already available in closely related tools (also free and open 
source, and which I happen to work on) that the authors neglected to cite: PathVisio [1] and 
Cytoscape [2]. These projects have both Java and JavaScript flavors. The JS version of Cytoscape 
was obviously used and cited in this work, but the Java version with its built-in data import, style 
and overlay options ~ as well as KEGG import ~ was missed. 

• Speaking of KEGG, I'm dubious about the blanket statement that it is "free of charge for 
academics". It's a complicated situation that I know many colleagues are unclear about, so I think 
it's important to describe it thoroughly. According to their own website [3], "Academic users who 
utilize KEGG for providing academic services are requested to obtain a KEGG FTP subscription for 
organizational use, which includes a proper license agreement." This leads to a licensing agent 
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with various paid subscription options [4,5]. The KEGG API, which KEGGViewer uses, is indeed 
freely provided for academic use, but only for individual downloads. Bulk downloads, such as 
those required to do analysis of over representation or enrichment, are explicitly forbidden and 
require a KEGG FTP subscription [6]. 
Software Developer: 

• It is unfortunate that the EBI host site has resources in conflict with the KEGGViewer. This seems 
counter to the whole point of BioJS and should be addressed in future releases of the EBI web site, 
cytoscape.js and/or KEGGViewer (whichever CSS is the most intrusive or classes least specific). 

• Beyond a bit of copy/paste JS (including a 5-level deep JS object), asking users to host a php 
proxy will likely turn some away. Is there any way around this? 

References 

1 . http://pathvisio.org 

2. http://cytoscape.org 

3. http://www.kegg.jp/kegg/legal.html 

4. http://www.bioinformatics.jp/en/keggftp.html 
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I have read this submission. I believe that I have an appropriate level of expertise to confirm that 
it is of an acceptable scientific standard. 
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KEGGViewer is a BioJS component for easy visualization of KEGG pathways. Although the article is quite 
short it provides all the essential information about the BioJS component for KEGG pathway visualization 
and points interested users to the source code for its implementation. We do however have some minor 
comments about the text: 

1 . The emphasis of signaling pathways is not reasoned enough in the text. KEGG has signaling 
pathways, but it is so much more (e.g. metabolism, information processing, diseases, etc). For the 
usage of the given component it makes no difference between pathway classification, this should 
be clarified. 

2. KEGG also has information about metabolites but this has not been mentioned in the text nor in the 
documentation of the component. I would assume that KEGG Viewer is capable of handling 
metabolite data as well, but it would be nice to have it specified in the text and/or in the 
documentation of the component. 

3. Although KEGGViewer is an easy plugin for visualizing KEGG pathways it is not a unique way for 
visualizing user data and alternative options could be mentioned in the Introduction section. KEGG 
itself allows for user data mapping, for example, KEGGanim is a special web tool for mapping 
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metabolite and gene expression data to the pathways. Other alternatives that could be mentioned 
include Reactome, which allows expression analysis from user provided data. 

4. Although the BioJS KEGGViewer component page has enough information to create working 
examples of the component, not all the requirements are self-explanatory (missing Ul icons, 
display problems on certain mac chrome versions, expression range setup bar is confusing and it 
could be set to a default state at 0,0, the proxy setup is confusing and needs better 
documentation). 

5. Currently, the description of parameters and options allows only basic usage. To make the 
component usable for a wider range of users and to display it's full power, the authors will have to 
considerably update the component description with additional details and 3-4 use cases. 

We have read this submission. We believe that we have an appropriate level of expertise to 
confirm that it is of an acceptable scientific standard. 

Competing Interests: No competing interests were disclosed. 
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